<template>
  <div>
    <!--    <div style="position: absolute;bottom: 50%;left: 0px;background: #fff;padding: 0.3rem;cursor: pointer;" @click="clearCache">清除缓存</div>-->
    <!--      <div style="position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 99;height:100%;" @click="$toast('活动未开始，敬请期待！！');"></div>-->
<!--    <div v-if="!!userData.userId" class="_wz_add_ljsc">-->
<!--      <div style="line-height: 0.8rem;font-size: 0.35rem;font-weight: 900;">{{userData.name}}</div>-->
<!--      <div style="font-size: 0.2rem;line-height: 0.4rem;">累计学习时长：<span style="color: #f00;font-size: 0.3rem;padding: 0 0.1rem;">{{userData.minute}}</span>分</div>-->
<!--    </div>-->
    <div class="_wz_LiveList">
      <img src="../assets1/er/h5/homeTop.png" style="width: 100%;"/>
      <div style="padding: 0 0.3rem 0;">
        <div>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index].img" @click="enter('live',ztList[index].type)" style="width: 95%;margin: 0px 0px 0.3rem;"/>
          </template>
        </div>
        <div>
          <img class="_wz_APP_b1" src="../assets1/er/h5/5-27-9-12.png"  style="width: 60%;margin: 0 0 0.4rem;"/>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 1].img" @click="enter('live',ztList[index + 1].type)" style="width: 95%;margin: 0px 0px 0.3rem;"/>
          </template>
        </div>
        <div>
          <img class="_wz_APP_b1" src="../assets1/er/h5/5-27-13-17.png"  style="width: 60%;margin: 0.4rem 0;"/>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 2].img" @click="enter('live',ztList[index + 2].type)" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
        </div>

        <div>
          <img class="_wz_APP_b1" src="../assets1/er/h5/5-27-14-17.png"  style="width: 60%;margin: 0.4rem 0;"/>
          <template v-for="item,index in 2">
            <img class="_wz_APP_b1"  :src="ztList[index + 3].img" @click="enter('live',ztList[index + 3].type)" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
          <template v-for="item,index in 2">
            <img class="_wz_APP_b1"  :src="ztList[index + 5].img"  style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>

          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 7].img" @click="enter('live',ztList[index + 7].type)" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>

          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 8].img" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>





<!--          <template v-for="item,index in 3">-->
<!--            <img class="_wz_APP_b1"  :src="ztList[index + 6].img" style="width: 95%;margin: 0 0 0.3rem 0;"/>-->
<!--          </template>-->
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 9].img" @click="enter('live',ztList[index + 9].type)" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
          <template v-for="item,index in 4">
            <img class="_wz_APP_b1"  :src="ztList[index + 10].img" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
        </div>
        <div>
          <img class="_wz_APP_b1" src="../assets1/er/h5/5-27-19-21.png"  style="width: 60%;margin: 0.4rem 0;"/>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 14].img" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
        </div>
        <div>
          <img class="_wz_APP_b1" src="../assets1/er/h5/5-28-8-12.png"  style="width: 60%;margin: 0.4rem 0;"/>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 15].img" @click="enter('live',ztList[index + 15].type)" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 16].img" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 17].img" @click="enter('live',ztList[index + 17].type)" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 18].img" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 19].img" @click="enter('live',ztList[index + 19].type)" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
          <template v-for="item,index in 1">
            <img class="_wz_APP_b1"  :src="ztList[index + 20].img" style="width: 95%;margin: 0 0 0.3rem 0;"/>
          </template>
        </div>
      </div>


    </div>
    <peoplePopup ref="peoplePopup" @checkUser="checkUser"></peoplePopup>


    <returnIndex :isPhone="$store.state.isMobile"></returnIndex>
  </div>
</template>
<script>
import wxApi from "@/utils/wxapi.js";
import peoplePopup from "@/components/peoplePopup.vue";
import returnIndex from "@/components/return";
export default {
  components: {
    peoplePopup,//登录使用
    returnIndex,//返回首页
  },
  data() {
    return {
      userData:!!localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {},
      loading: true,//加载

      ztList: [//论坛列表 2 8 15  16 17 22
        {type: '1660615598539018241', img: require("../assets1/er/h5/live1.png")},//
        {type: '1660615598539018241', img: require("../assets1/er/h5/live2.png")},//
        {type: '1660615797369999362', img: require("../assets1/er/h5/live3.png")},//

        {type: '1660616134180999170', img: require("../assets1/er/h5/live4-1.png")},//
        {type: '1660616355984183298', img: require("../assets1/er/h5/live4-2.png")},//
        {type: 6, img: require("../assets1/er/h5/live4-3.png")},//
        {type: 7, img: require("../assets1/er/h5/live4-4.png")},//
        {type: '1660616552315359233', img: require("../assets1/er/h5/live4-5.png")},//
        {type: 9, img: require("../assets1/er/h5/live4-6.png")},//


        {type: '1660616885724778498', img: require("../assets1/er/h5/live5-1.png")},//
        {type: 11, img: require("../assets1/er/h5/live5-2.png")},//
        {type: 12, img: require("../assets1/er/h5/live5-3.png")},//
        {type: 13, img: require("../assets1/er/h5/live5-4.png")},//
        {type: 14, img: require("../assets1/er/h5/live5-5.png")},//


        // {type: 4, img: require("../../assets1/er/pc/live6-1.png")},/
        {type: 15, img: require("../assets1/er/h5/live6-2.png")},//

        {type: '1660922763292184578', img: require("../assets1/er/h5/live7-1.png")},//
        {type: 17, img: require("../assets1/er/h5/live7-2.png")},//
        {type: "1660617126024843265", img: require("../assets1/er/h5/live7-3.png")},//
        {type: 19, img: require("../assets1/er/h5/live7-4.png")},//
        {type: '1660617398348419073', img: require("../assets1/er/h5/live7-5.png")},//
        {type: 21, img: require("../assets1/er/h5/live7-6.png")},//
      ]
    };
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  //activated和deactivated配合keep-alive标签使用!
  activated () {
    console.log('实例被激活时使用')
  },
  deactivated () {
    console.log('实例没有被激活时')
  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    console.log('挂载结束状态')
    //调用微信方法
    wxApi("", "", "https://prod.sumaokeji.com/h5/meeting/#/");

    //TODO
    // localStorage.clear();
    //判断用户是否登录
    if (!localStorage.getItem("userId")) {
      console.log('每次都从新获取新的用户数据')
      that.$refs.peoplePopup.open(that.$store.state.isMobile);
    } else {
      that.checkUser();
    }
  },
  methods: {//执行的方法
    enter(flag, type) {//跳转地址
      let that = this;
      if (flag == "live") {
        that.pushPage(`${flag}`, { type: type });
      } else {
        that.pushPage(`${flag}`);
      }
    },
    //检验用户是否过期
    checkUser() {
      let that = this;
      that.$toast.loading({message: "加载中...", forbidClick: true});
      that.http.checkUserId({userId: localStorage.getItem("userId")}).then(res => {
        that.$toast.clear();
        if (res.status == 1103) {
          that.$refs.peoplePopup.open(that.$store.state.isMobile);
          // that.$that.$toast("登录已过期，请重新登录");
        }else{
          if (res.status == 1000) {
            if(!!res.data){
              localStorage.setItem("userId", res.data.userId);
              localStorage.setItem("userData", JSON.stringify(res.data));
              that.userData = res.data;
            }else{
              that.userData = {};
              that.$refs.peoplePopup.open(that.$store.state.isMobile);
              that.clearCache()
            }
          }
        }
      }).catch(err => {
        that.$toast.clear();
      });
    },
    clearCache(){
      localStorage.clear();
    },
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style scoped lang="scss">
._wz_LiveList {
  background-image: url(../assets1/er/h5/indeBack.png);
  background-size: 100% 100%;
  width: 7.5rem;
  //height: 23.47rem;
  padding: 0 0 2rem 0;
  .logo {
    width: 2.9rem;
    height: 0.58rem;
    position: absolute;
    left: 0.4rem;
  }
  .tip {
    margin: 1rem 0;
    width: 75%;
  }
  .bm {
    padding: 0 0.4rem;
  }
  ._wz_APP_b1 {
    width: 100%;
    // border-radius: 0.4rem;
    // box-shadow: 1px 5px 10px #6699cc;
  }
  .mt4 {
    margin-top: 0.55rem;
  }
  .tit {
    margin-top: 0.66rem;
    font-size: 0.4rem;
    font-weight: bold;
    color: #000;
  }
  .hy-img {
    width: 100%;
    margin-top: 0.39rem;
    border-radius: 0.4rem;
    box-shadow: 0px 2px 2px #6699cc;
  }
}
._wz_add_ljsc{
  position: absolute;
  right: 0px;
  background: url("../assets1/sc.png") no-repeat;
  background-size: 100% 100%;
  padding:0 0.4rem 0.4rem;
  top: 0px;
}
._wz_12-1-app_-baca{
  background-image: url(../assets1/pc/12-1-bac.png);
  background-repeat: no-repeat;
  background-size: 96% 100%;
  background-position: center;
  padding: 10px;
}
</style>
/*
2.PC  和 APP  的 会议议程图 16 * 2
3.会议须知图标
*/
